<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>智能问答 - 智能水产养殖系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .chat-container {
            height: 400px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 1rem;
            background-color: #f8f9fa;
        }
        .message {
            margin-bottom: 1rem;
            padding: 0.75rem;
            border-radius: 0.5rem;
            max-width: 80%;
        }
        .user-message {
            background-color: #007bff;
            color: white;
            margin-left: auto;
        }
        .ai-message {
            background-color: #e9ecef;
            color: #212529;
        }
        .typing-indicator {
            display: none;
            color: #6c757d;
            font-style: italic;
        }
    </style>
</head>
<body class="bg-light">

<div class="container py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-primary">
                <i class="bi bi-robot"></i> 智能问答系统
            </h2>
            <p class="text-muted">水产养殖专家AI助手，为您解答养殖相关问题</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-chat-dots"></i> 智能对话
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chat-container" id="chat-container">
                        <div class="message ai-message">
                            <strong>AI助手：</strong>您好！我是水产养殖智能助手，可以为您解答关于水温、pH值、溶解氧、喂食、疾病、水质、温度、氧气、饲料或养殖等方面的问题。请问有什么可以帮助您的吗？
                        </div>
                    </div>
                    
                    <div class="typing-indicator" id="typing-indicator">
                        <i class="bi bi-three-dots"></i> AI正在思考中...
                    </div>
                    
                    <form id="chat-form" class="mt-3">
                        <div class="input-group">
                            <input type="text" id="question-input" class="form-control" 
                                   placeholder="请输入您的问题..." required>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-send"></i> 发送
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-lightbulb"></i> 常见问题</h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <button class="list-group-item list-group-item-action" 
                                onclick="askQuestion('水温对鱼类生长有什么影响？')">
                            <i class="bi bi-thermometer-half"></i> 水温对鱼类生长有什么影响？
                        </button>
                        <button class="list-group-item list-group-item-action" 
                                onclick="askQuestion('如何调节水体的pH值？')">
                            <i class="bi bi-droplet"></i> 如何调节水体的pH值？
                        </button>
                        <button class="list-group-item list-group-item-action" 
                                onclick="askQuestion('鱼类缺氧怎么办？')">
                            <i class="bi bi-cloud-rain"></i> 鱼类缺氧怎么办？
                        </button>
                        <button class="list-group-item list-group-item-action" 
                                onclick="askQuestion('如何预防鱼类疾病？')">
                            <i class="bi bi-shield-check"></i> 如何预防鱼类疾病？
                        </button>
                        <button class="list-group-item list-group-item-action" 
                                onclick="askQuestion('科学养殖需要注意什么？')">
                            <i class="bi bi-gear"></i> 科学养殖需要注意什么？
                        </button>
                        <button class="list-group-item list-group-item-action" 
                                onclick="askQuestion('如何选择优质饲料？')">
                            <i class="bi bi-basket"></i> 如何选择优质饲料？
                        </button>
                    </div>
                </div>
            </div>

            <div class="card shadow mt-3">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> 使用提示</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><i class="bi bi-check-circle text-success"></i> 可以询问水质相关问题</li>
                        <li><i class="bi bi-check-circle text-success"></i> 可以咨询养殖技术问题</li>
                        <li><i class="bi bi-check-circle text-success"></i> 可以了解疾病防治方法</li>
                        <li><i class="bi bi-check-circle text-success"></i> 可以获取饲料选择建议</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="{{ url_for('user_home') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回主页
            </a>
        </div>
    </div>
</div>

<script>
const chatContainer = document.getElementById('chat-container');
const questionInput = document.getElementById('question-input');
const chatForm = document.getElementById('chat-form');
const typingIndicator = document.getElementById('typing-indicator');

// 添加消息到聊天界面
function addMessage(message, isUser = false) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
    messageDiv.innerHTML = `<strong>${isUser ? '您：' : 'AI助手：'}</strong>${message}`;
    chatContainer.appendChild(messageDiv);
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

// 显示/隐藏输入指示器
function showTypingIndicator() {
    typingIndicator.style.display = 'block';
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

function hideTypingIndicator() {
    typingIndicator.style.display = 'none';
}

// 发送问题
function askQuestion(question) {
    questionInput.value = question;
    chatForm.dispatchEvent(new Event('submit'));
}

// 处理表单提交
chatForm.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const question = questionInput.value.trim();
    if (!question) return;
    
    // 添加用户消息
    addMessage(question, true);
    questionInput.value = '';
    
    // 显示输入指示器
    showTypingIndicator();
    
    // 发送请求到服务器
    fetch('/ai_chat', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `question=${encodeURIComponent(question)}`
    })
    .then(response => response.json())
    .then(data => {
        hideTypingIndicator();
        addMessage(data.answer);
    })
    .catch(error => {
        hideTypingIndicator();
        addMessage('抱歉，服务器出现错误，请稍后再试。');
        console.error('Error:', error);
    });
});

// 回车发送
questionInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        chatForm.dispatchEvent(new Event('submit'));
    }
});
</script>

</body>
</html> 